<template>
  <a-drawer v-model:visible="visible" title="微信名片详情" :width="width >= 680 ? 680 : '100%'" :footer="false">
    <a-descriptions :column="2" size="large" class="general-description">
      <!-- <a-descriptions-item label="ID">{{ dataDetail?.id }}</a-descriptions-item> -->
      <a-descriptions-item label="姓名">
        <Avatar :src="dataDetail?.avatar" :name="dataDetail?.name" :size="40">
        </Avatar>
        {{ dataDetail?.name }}
      </a-descriptions-item>
      <a-descriptions-item label="性别">
        <a-tag v-if="dataDetail?.gender === 1" color="arcoblue" size="small" class="gi_round">男<icon-man /></a-tag>
        <a-tag v-else-if="dataDetail?.gender === 2">女<icon-woman /></a-tag>
        <a-tag v-else>
          未知
          <IconQuestionCircle />
        </a-tag>  
      </a-descriptions-item>
      <a-descriptions-item label="微信号">
        <a-typography-paragraph copyable>{{ dataDetail?.wechat }}</a-typography-paragraph>
      </a-descriptions-item>
      <a-descriptions-item label="手机号码">{{ dataDetail?.phone }}</a-descriptions-item>
      <a-descriptions-item label="邮箱">{{ dataDetail?.email }}</a-descriptions-item>
      <a-descriptions-item label="个人简介" :span="2">{{ dataDetail?.introduction }}</a-descriptions-item>
      <a-descriptions-item label="公司">{{ dataDetail?.company?.name }}</a-descriptions-item>
      <a-descriptions-item label="职位">{{ dataDetail?.title }}</a-descriptions-item>
      <a-descriptions-item label="地址">{{ dataDetail?.company?.address }}</a-descriptions-item>

      <!-- <a-descriptions-item label="修改人">{{ dataDetail?.updateUserString }}</a-descriptions-item>
      <a-descriptions-item label="修改时间">{{ dataDetail?.updateTime }}</a-descriptions-item> -->
      <!-- <a-descriptions-item label="描述" :span="2">{{ dataDetail?.description }}</a-descriptions-item> -->
      <a-descriptions-item label="状态">
        <a-tag v-if="dataDetail?.status === 1" color="green">启用</a-tag>
        <a-tag v-else color="red">禁用</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="创建人">{{ dataDetail?.createUserString }}</a-descriptions-item>
      <a-descriptions-item label="创建时间">{{ dataDetail?.createTime }}</a-descriptions-item>

    </a-descriptions>
    <a-divider />
    <a-descriptions :column="1" size="large" class="general-description">
      <a-descriptions-item v-for="item in dataDetail?.companyIntroduction" :key="dataDetail?.companyIntroduction.id">
        <a-typography-title :heading="5">{{ item.title }}</a-typography-title>
        <a-typography-paragraph>{{ item.content }}</a-typography-paragraph>
      </a-descriptions-item>
    </a-descriptions>
  </a-drawer>
</template>

<script lang="ts" setup>
import { getBusinessCard, type BusinessCardDetailResp } from '@/apis/website/businessCard';
import { useWindowSize } from '@vueuse/core';

const { width } = useWindowSize()

const visible = ref(false)
const dataId = ref('')
const dataDetail = ref<BusinessCardDetailResp>()
// 查询详情
const getDataDetail = async () => {
  const res = await getBusinessCard(dataId.value)
  dataDetail.value = res.data
}

// 打开详情
const onDetail = async (id: string) => {
  dataId.value = id
  await getDataDetail()
  visible.value = true
}

defineExpose({ onDetail })
</script>

<style lang="scss" scoped></style>
